<script>
import { mapState } from 'vuex';
import { chargeType, paymentMethod, paymentStatus } from '@/const';

export default {
  name: 'pay',
  data() {
    return {
      // 获取缴费列表参数
      params: {
        page: 1.,
        pageSize: 10,
        carNumber: undefined,
        paymentStatus: null,
      },
      loading: false,
    };
  },
  methods: {
    /*
    * 格式化回调函数
    * */
    formatChargeType(type) {
      return chargeType[type];
    },
    formatPaymentStatus(type) {
      return paymentStatus[type];
    },
    formatPaymentMethod(type) {
      return paymentMethod[type] || '——';
    },
    // 派发action获取缴费列表的回调函数
    async fetchPaymentList() {
      try {
        this.loading = true;
        await this.$store.dispatch('payStore/fetchPaymentListAction', this.params);
      } catch (error) {
        this.$message.error(error.message);
      } finally {
        this.loading = false;
      }
    },
    /*
    * 分页回调函数
    * */
    handleSizeChange(pageSize) {
      this.params.pageSize = pageSize;
      this.fetchPaymentList();
    },
    handleCurrentChange(page) {
      this.params.page = page;
      this.fetchPaymentList();
    },
    // 点击查询
    handleSearch() {
      this.params.page = 1;
      this.fetchPaymentList();
    },
  },
  computed: {
    ...mapState('payStore', ['paymentList', 'total']),
  },
  mounted() {
    this.fetchPaymentList();
  },
};
</script>

<template>
  <div class="pay-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-form inline :model="params">
          <el-form-item label="车牌号码:">
            <el-input size="small" placeholder="请输入车牌号码" v-model="params.carNumber"></el-input>
          </el-form-item>
          <el-form-item label="缴纳状态">
            <el-select v-model="params.paymentStatus" size="small">
              <el-option :value="undefined" label="全部"></el-option>
              <el-option value="0" label="未缴纳"></el-option>
              <el-option value="1" label="已缴纳"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small" icon="el-icon-search" :loading="loading" @click="handleSearch">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table size="small" border stripe :header-cell-style="{background:'#f4f6f8',color:'#000'}" :data="paymentList" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(255, 255, 255, 1)">
        <el-table-column type="index" label="序号" align="center"></el-table-column>
        <el-table-column prop="carNumber" label="车牌号码" align="center"></el-table-column>
        <el-table-column label="收费类型" align="center">
          <template #default="{row}">
            {{ formatChargeType(row.chargeType) }}
          </template>
        </el-table-column>
        <el-table-column prop="parkingTime" label="停车总时长" align="center"></el-table-column>
        <el-table-column prop="actualCharge" label="缴纳费用(元)" align="center"></el-table-column>
        <el-table-column label="缴纳状态">
          <template #default="{row}" align="center">
            {{ formatPaymentStatus(row.paymentStatus) }}
          </template>
        </el-table-column>
        <el-table-column prop="" label="缴纳方式" align="center">
          <template #default="{row}">
            {{ formatPaymentMethod(row.paymentMethod) }}
          </template>
        </el-table-column>
        <el-table-column prop="paymentTime" label="缴纳时间" align="center"></el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="params.page" :page-sizes="[10, 20, 30, 40]" :page-size="params.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" background></el-pagination>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.pay-container {
  padding: 15px;
}
</style>
